<template>
  <view>
    <!-- 搜索 -->
    <view class="m-search">
      <u-search
        :showAction="false"
        placeholder="搜索商品"
        v-model="keyword"
      ></u-search>
    </view>
    <!-- 一级分类 -->
    <view class="m-category">
      <scroll-view scroll-y class="left">
        <view
          @click="changeActiveId(item.id)"
          class="item"
          :class="{ active: light(item.id) }"
          v-for="item in cateLeft"
          :key="item.id"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <scroll-view :scroll-top="scrollTop" scroll-y class="right">
        <view>
          <!-- 轮播图 -->
          <swiper class="m-swiper" indicator-dots autoplay circular>
            <swiper-item v-for="item in cateRightList" :key="item.id">
              <image :src="item.imgUrl"></image>
            </swiper-item>
          </swiper>
        </view>
        <!-- 二级分类 -->
        <view class="cate" v-for="item in cateRight.children" :key="item.id">
          <view class="title">{{ item.name }}</view>
          <view class="goods-list">
            <navigator
              class="goods"
              v-for="goods in item.goods"
              :key="goods.id"
              :url="`/pages/goods/index?id=${goods.id}`"
            >
              <image :src="goods.picture" class="pic" mode="aspectFit" />
              <view class="name">{{ goods.name }}</view>
              <view class="price">{{ goods.price }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      keyword: '',
      // 一级分类
      cateList: [],
      activeId: '',
      scrollTop: -1,
      cateRightList: []
    }
  },
  computed: {
    cateLeft () {
      return this.cateList.map(item => {
        return {
          id: item.id,
          name: item.name
        }
      })
    },
    cateRight () {
      return this.cateList.length
        ? this.cateList.find(item => {
            return this.light(item.id)
          })
        : []
    },
    ...mapState('category', ['categoryLIst'])
  },
  onLoad () {
    this.getCateList()
    this.getCateRightList()
  },
  methods: {
    async getCateList () {
      const res = await uni.$u.http.get('/category/top')
      this.cateList = res.data.result
      this.activeId = res.data.result[0].id
    },
    async getCateRightList () {
      const res = await uni.$u.http.get('/home/banner')
      this.cateRightList = res.data.result
    },
    changeActiveId (id) {
      if (this.categoryLIst) {
        this.activeId === this.categoryLIst
        this.$store.commit('category/changeDateCategoryLIst', id)
      } else {
        this.activeId = id
      }
      this.scrollTop = -1
      this.$nextTick(() => {
        this.scrollTop = 0
      })
    },
    // 如果 vuex 里面有数据就跳转到指定的id分类名
    // 反之没有就用 分类页  自带的数据
    light (id) {
      if (this.categoryLIst) {
        return id === this.categoryLIst
      } else {
        return id === this.activeId
      }
    }
  }
}
</script>

<style lang="scss">
.m-search {
  padding: 10rpx 25rpx;
  background-color: #fff;
}
.m-category {
  display: flex;
  height: calc(100vh - 34px - 20rpx);
  .left {
    width: 180rpx;
    background-color: #f6f6f6;
    height: 100%;
    .item {
      height: 96rpx;
      text-align: center;
      line-height: 96rpx;
      font-size: 26rpx;
      color: #595c63;
      position: relative;
      &.active {
        background: #fff;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          width: 8rpx;
          height: 100%;
          background: #27ba9b;
        }
      }
      &::after {
        content: '';
        position: absolute;
        left: 25rpx;
        bottom: 0;
        width: 96rpx;
        border-top: 1rpx solid #e3e4e7;
      }
      &:last-child::after {
        display: none;
      }
    }
  }
  .right {
    flex: 1;
    padding: 0 30rpx;
    .m-swiper {
      width: 100%;
      height: 200rpx;
      image {
        width: 100%;
        height: 200rpx;
      }
    }
    .title {
      margin: 18rpx 0 21rpx;
      text-align: left;
    }
    .goods-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 0;
      justify-content: space-between;
      .goods {
        width: 150rpx;
        margin-bottom: 20rpx;
        .pic {
          width: 150rpx;
          height: 150rpx;
        }
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 26rpx;
          color: #333;
        }
        .price {
          font-size: 22rpx;
          color: #cf4444;
        }
      }
    }
  }
}
</style>
